<template>
  <div>
    <div class="order-setting-item" style="margin-top:12px;padding-top:5px;padding-bottom:5px;">
      <fieldTree
        :field-items="fieldData(fieldItems)"
        :default-expanded-keys="defaultExpandedKeys"
        show-select-type
        @getData="getData" />
    </div>
    <fieldManage style="margin: 12px 0;" show-title />
  </div>
</template>

<script>
import fieldTree from '@/components/SettingPage/fieldTree';
import fieldManage from '@/views/total/fieldManage/index';
import { hasRouteAuth } from '@/utils/permission';
export default {
  components: { fieldTree, fieldManage },
  props: {
    fieldItems: {
      type: Array,
      default: () => {
        return [];
      }
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    hasRouteAuth,
    getData(respetPid) {
      this.$emit('getData', respetPid);
    },
    fieldData(data) {
      const index = data.findIndex(item => {
        return item.name === '条件筛选' || item.name === '功能模块已同步字段';
      });
      if (index >= 0) {
        data[index] = this.recursive([data[index]])[0];
      }
      return data;
    },
    recursive(data) {
      data.forEach(item => {
        item.showOperate = true;
        if (item.item && item.item.length > 0) {
          this.recursive(item.item);
        }
      });
      return data;
    }
  }
};
</script>

<style lang="scss" scoped>
.order-setting-item {
  // box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  // border-radius:12px;
  background-color: #fff;
  padding: 24px;
}
</style>
